<template>
  <div>
    <div>
      <div class="table-page-search-wrapper">
        <div class="knowledge-search">
          <a-form layout="inline">
            <a-row :gutter="24">
              <template>
                <a-col :md="9" :sm="12" style="float: left;overflow: hidden;">
                  <el-select
                    v-model="value"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    size="small"
                    style="width: 100%"
                  >
                    <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
                  </el-select>
                </a-col>
                <a-button type="primary" icon="search" @click="searchOne()">查询</a-button>
              </template>
            </a-row>
          </a-form>
        </div>
        <div class="drug">
          <a-form layout="inline">
            <a-row :gutter="10">
              <template>
                <a-col
                  :md="4"
                  :sm="6"
                  style="float: left;overflow: hidden;"
                  class="drug-classification"
                >检查检验项目</a-col>
                <a-col
                  :md="12"
                  :sm="12"
                  style="float: left;overflow: hidden;"
                  class="drug-information"
                >项目名称</a-col>
              </template>
            </a-row>
          </a-form>
        </div>
        <div class="drugs">
          <a-form layout="inline">
            <a-row :gutter="10">
              <template>
                <a-col
                  :md="4"
                  :sm="6"
                  style="float: left;overflow: hidden;"
                  class="drugs-classification"
                >
                  <div>
                    <a-menu
                      mode="inline"
                      :openKeys="openKeys"
                      @openChange="onOpenChange"
                      style="width: 280px"
                    >
                      <a-sub-menu key="sub1" @titleClick="openOneItem(3)" title="化验检验">
                        <a-menu-item
                          :key="item.id"
                          v-for="(item,index) in hxInfoAry"
                          @click="changeNext(item.id,index,3)"
                        >{{item.hxName}}</a-menu-item>
                      </a-sub-menu>
                      <a-sub-menu key="sub2" @titleClick="openOneItem(4)" title="物理检验">
                        <a-menu-item
                          :key="item.id"
                          v-for="(item,index) in wlInfoAry"
                          @click="changeNext(item.id,index,4)"
                        >{{item.wuName}}</a-menu-item>
                      </a-sub-menu>
                    </a-menu>
                  </div>
                </a-col>
                <a-col :md="12" :sm="12" class="drugs-information">
                  <a-col
                    :md="8"
                    :sm="8"
                    v-for="(item,key) in fuzzySearch"
                    class="drugs-information-line"
                    :key="item.id"
                    @click="jumpWindow(item.id)"
                  >
                    {{item.inspect_name}}
                  </a-col>
                </a-col>
              </template>
            </a-row>
          </a-form>
        </div>
      </div>
      <company-profile />
    </div>
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import CompanyProfile from '../../components/knowlage/companyProfile'
import KnowTopnav from '../../components/knowlage/knowtopnav'
import { getAction } from '@/api/manage'
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'

const indexKey = '/dashboard/analysis'

export default {
  //检查检验页面
  name: 'InspectionInspection',
  components: {
    CompanyProfile,
    KnowTopnav,
    GlobalLayout,
    Contextmenu
  },
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub2'],
      openKeys: [],
      knoIiOwnerAll: [],
      knoIiOwnerAllDetail: [],
      
      searchForinsp: [],//点击搜索数据加载
      options: [],
      value: [],
      fuzzySearch: [],//点击左侧加载右侧
      list: [],
      loading: false,
      states: ['张洪亮'],
      linkList: [],
      activePage: '',
      menuVisible: false,
      insdetail: true,
      knoIiOwner: [],
      wlInfoAry: [],
      hxInfoAry: [],
      url: {
        list: '/knowledge/knoIiOwner/list',
        listTwo: '/es/searchFull/getSearchSecondLeveList',//通过id查询二级药品
        delete: '/knowledge/knoIiOwner/delete',
        deleteBatch: '/knowledge/knoIiOwner/deleteBatch',
        exportXlsUrl: 'knowledge/knoIiOwner/exportXls',
        importExcelUrl: 'knowledge/knoIiOwner/importExcel',
        queryType: '/knowledge/knoIiOwner/queryTypeNameList',
        queryKno: '/knowledge/knoIiOwner/queryKnoIiAttByMainId',
        detaillist: '/knowledge/knoIiOwner/queryKnoIiAttByMainId',
        getSearchSecondLeveList: '/es/searchFull/getSearchSecondLeveList',
        fuzzysearch: '/es/searchFull/getSearchDiseaseOrDrugsAll',
        querySearchList: '/knowledge/knoCgOwner/querySearchList',
        getSearchCheckAndDrugAll: '/es/searchFull/getSearchCheckAndDrugAll'
      }
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `${item}`, label: `${item}` }
    })
  },
  created() {
    getAction(this.url.list).then(res => {
      if (res.success) {
        this.knoIiOwnerAll = res.result.records
      }
      if(res.code===510){
        this.$message.warning(res.message)
      }
    })
  },
  methods: {
    openOneItem(sign){//点击展开加载信息
      getAction(this.url.getSearchCheckAndDrugAll,{searchType:4,catetoryType: sign}).then(res => {
        if (res.success) {
          if(sign == 3){
            this.hxInfoAry = res.result;
            this.hxInfoAry.forEach((item,index) => {
              item.inlinCollasp = [];
            })
          }else{
            this.wlInfoAry = res.result
            this.wlInfoAry.forEach((item,index) => {
              item.inlinCollasp = [];
            })
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    jumpWindow(itemId){
      let routeUrl = this.$router.resolve({path:'/knowlage/detail',query:{id: itemId, type: 6}});
      window.open(routeUrl.href, '_blank');
    },
    remoteMethod(query) {
      getAction(this.url.querySearchList, { searchType: 4, filed: query }).then(res => {
        if (res.success) {
          let soon = []
          for (var i = 0; i < res.result.length; i++) {
            soon.push(res.result[i].inspectName)
          }
          this.states = soon
          this.list = this.states.map(item => {
            return { value: `${item}`, label: `${item}` }
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
      if (query !== '') {
        this.options = this.list.filter(item => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
        })
      } else {
        this.options = []
      }
    },
    searchOne(e) {
      if (this.value.length == 0) {
        getAction(this.url.getSearchCheckAndDrugAll, { searchName: '', searchType: 4 }).then(res => {
          if (res.success) {
            this.fuzzySearch = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      } else {
        getAction(this.url.getSearchCheckAndDrugAll, { searchName: '"' + this.value[0] + '"', searchType: 4 }).then(
          res => {
            if (res.success) {
              this.fuzzySearch = res.result
            }
            if (res.code === 510) {
              this.$message.warning(res.message)
            }
          }
        )
      }
    },
    changeNext(infoId, index, sign) {
      //点击一级信息 展开
      getAction(this.url.listTwo,{searchId: infoId,searchType:4}).then(res => {
        if (res.success) {
          this.fuzzySearch = res.result;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
.table-page-search-wrapper {
  width: 100%;
  background-color: #fff;
  padding-top: 10px;
  margin-left: 10px;
  padding-left: 32px;
  padding-bottom: 30px;

  .drug-classification {
    background-color: #d3f2f4;
    height: 46px;
    font-size: 16px;
    color: #38c3c8;
    text-align: center;
    line-height: 46px;
    margin-left: 4px;
    width: 280px;
  }
  .drug-information {
    background-color: #d3f2f4;
    height: 46px;
    font-size: 16px;
    color: #38c3c8;
    text-align: center;
    line-height: 46px;
    margin-left: 10px;
    width: 910px;
  }
  .drugs-classification {
    height: 620px;
    border: 1px solid #ebeef5;
    margin-left: 4px;
    width: 280px;
    overflow: auto;

    /deep/ .ant-menu-item-active {
      color: #38c3c8;
    }
    /deep/ .ant-menu-item-selected {
      color: #38c3c8;
    }
  }
  .drugs-information {
    height: 620px;
    border: 1px solid #ebeef5;
    margin-left: 10px;
    width: 910px;
    color: #333;
    overflow: auto;
    font-size: 14px;

    .drugs-information-line {
      padding: 3px;
      margin-top: 10px;
    }
  }
  .knowledge-top-search {
    margin-left: -40px;

    li {
      font-size: 16px;
      display: inline;
      margin-right: 35px;
      color: #333;
    }
    li:hover {
      color: #38c3c8;
    }
  }
  .knowledge-search {
    margin-top: 30px;
    padding-bottom: 20px;
  }
}
.hover-change {
  color: #333;
}
</style>